<script setup lang="ts">
import { QuestionType, TemplateUpdateForm } from '@/api/exam/template/types';
import { debounce } from 'lodash-es';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { exam_question_type } = toRefs<any>(proxy?.useDict('exam_question_type'));
const props = withDefaults(defineProps<{
  templateList?: TemplateUpdateForm[];
}>(), {
  templateList: () => []
});

</script>

<template>
  <div class="survey-antd">
    <div v-for="(template, index) in props.templateList">
      <dict-tag :options="exam_question_type" :value="template.template.type" />
      <el-text tag="b" size="large">{{ index + 1 }} {{ template.template.title }}</el-text>
      <div class="mb-4">
        <el-radio-group v-if="template.template.type === QuestionType.Radio ||
        template.template.type === QuestionType.TrueFalse">
          <el-row>
            <el-col
              v-for="(option, idx) in template.template.children"
              :key="idx"
              :span="24 / (template.template.attribute.columns || 1)"
            >
              <el-radio :key="index" :label="option.id">
                {{ option.title }}
              </el-radio>
            </el-col>
          </el-row>
        </el-radio-group>
        <el-checkbox-group v-if="template.template.type ===QuestionType.Checkbox">
          <el-row>
            <el-col
              v-for="(option, idx) in template.template.children"
              :key="idx"
              :span="24 / (template.template.attribute.columns || 1)"
            >
              <el-checkbox :label="option.id" class="w-full">
                {{ option.title }}
              </el-checkbox>
            </el-col>
          </el-row>
        </el-checkbox-group>
        <div v-if="template.template.type === QuestionType.MultipleBlank ||
        template.template.type === QuestionType.FillBlank">
          <el-row>
            <el-col
              v-for="(option, idx) in template.template.children"
              :key="idx" class="mt-1 mb-1"
              :span="24 / (template.template.attribute.columns || 1)"
            >
              <el-input v-model="option.attribute.examCorrectAnswer" class="w-full" />
            </el-col>
          </el-row>
        </div>
        <div v-if="template.template.type ===QuestionType.Textarea">
          <el-row>
            <el-col
              v-for="(option, idx) in template.template.children"
              :key="idx" class="mt-1 mb-1"
              :span="24 / (template.template.attribute.columns || 1)"
            >
              <el-input type="textarea" v-model="option.attribute.examCorrectAnswer" class="w-full"
                        :autosize="{ minRows: 2, maxRows: 6 }" resize="none" />
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.survey-antd {
  position: relative;
  max-width: 780px;
  margin: 32px auto;
  padding-bottom: 60px;
  white-space: pre;

  border-width: 0px;
  border-radius: 8px;

}
</style>
